<!--
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="ddp-edit-setting ddp-type" [class.ddp-selected]="isShowAdvancedSetting">
  <a href="javascript:" class="ddp-fold-link" (click)="onClickSettingOption()">{{'msg.storage.th.advanced.setting' | translate}}</a>
  <div class="ddp-wrap-down">
    <!-- Ingestion tuning config -->
    <div class="ddp-wrap-edit2 ddp-type">
      <label class="ddp-label-type ddp-info-inline ddp-bold ">
        {{'msg.storage.ui.tuning.settings' | translate}}
        <!-- hover info -->
        <div class="ddp-wrap-hover-info ddp-type">
          <em class="ddp-icon-info3"></em>
          <!-- popup -->
          <div class="ddp-box-layout4 ddp-config">
            <div class="ddp-data-title">
              {{'msg.storage.ui.tuning.description.title' | translate}}
            </div>
            <div class="ddp-data-det">
              {{'msg.storage.ui.tuning.description' | translate}}
            </div>
          </div>
          <!-- //popup -->
        </div>
        <!-- //hover info -->
      </label>
      <div class="ddp-box-code">
        <!-- list -->
        <div class="ddp-clear ddp-list-code" *ngFor="let option of tuningConfig; let i = index">
          <!-- key -->
          <div class="ddp-col-5">
            <div class="ddp-txt-label" *ngIf="option.defaultOpt">{{option.key}}</div>
            <input *ngIf="!option.defaultOpt" type="text" class="ddp-input-typebasic ddp-full" placeholder="{{'msg.storage.ph.config.key' | translate}}"
                   [(ngModel)]="option.key" (ngModelChange)="option.keyError = false" (focusout)="configKeyValidation(option, tuningConfig)">
            <span class="ddp-data-error" *ngIf="!option.defaultOpt && option.keyError"> {{option.keyValidMessage}}</span>
          </div>
          <!-- //key -->
          <!-- value -->
          <div class="ddp-col-7">
            <input type="text" class="ddp-input-typebasic ddp-full" placeholder="{{option.ph || ('msg.storage.ph.config.value' | translate)}}"
                   [(ngModel)]="option.value" (ngModelChange)="option.valueError = false">
            <span class="ddp-data-error" *ngIf="option.valueError"> {{option.valueValidMessage}}</span>
          </div>
          <!-- value -->
          <!-- delete -->
          <a href="javascript:" class="ddp-icon-close" *ngIf="!option.defaultOpt" (click)="onClickRemoveOption('tuningConfig', i)"></a>
          <!-- //delete -->
        </div>
        <!-- //list -->
        <!-- add option -->
        <a href="javascript:" class="ddp-btn-add" (click)="onClickAddOption('tuningConfig')"><em class="ddp-icon-plus"></em> {{'msg.comm.btn.add' | translate}}</a>
        <!-- //add option -->
      </div>
    </div>
    <!-- //Ingestion tuning config -->
    <!-- job properties -->
    <div class="ddp-wrap-edit2 ddp-type" *ngIf="createType === 'STAGING'">
      <label class="ddp-label-type ddp-info-inline ddp-bold ">
        {{'msg.storage.ui.dsource.create.job.properties' | translate}}
        <!-- hover info -->
        <div class="ddp-wrap-hover-info ddp-type">
          <em class="ddp-icon-info3"></em>
          <!-- popup -->
          <div class="ddp-box-layout4 ddp-config">
            <div class="ddp-data-title">
              {{'msg.storage.ui.job.properties.description.title' | translate}}
            </div>
            <div class="ddp-data-det">
              {{'msg.storage.ui.job.properties.description' | translate}}
              <div class="ddp-link-det">
                <a target="_blank" href="http://hadoop.apache.org/docs/stable/hadoop-mapreduce-client/hadoop-mapreduce-client-core/mapred-default.xml">
                  {{'msg.storage.ui.job.properties.description.link' | translate}}
                  <div class="ddp-ui-tooltip-info ddp-down" style="display:;">
                    <em class="ddp-icon-view-top"></em>
                    http://hadoop.apache.org/docs/stable/hadoop-mapreduce-client/hadoop-mapreduce-client-core/mapred-default.xml
                  </div>
                </a>

              </div>
            </div>
          </div>
          <!-- //popup -->
        </div>
        <!-- //hover info -->
      </label>
      <div class="ddp-box-code">
        <!-- list -->
        <div class="ddp-clear ddp-list-code" *ngFor="let option of jobProperties; let i = index">
          <!-- key -->
          <div class="ddp-col-5">
            <div class="ddp-txt-label" *ngIf="option.defaultOpt">{{option.key}}</div>
            <input type="text" *ngIf="!option.defaultOpt" class="ddp-input-typebasic ddp-full" placeholder="{{'msg.storage.ph.config.key' | translate}}"
                   [(ngModel)]="option.key" (ngModelChange)="option.keyError = false" (focusout)="configKeyValidation(option, jobProperties)">
            <span class="ddp-data-error" *ngIf="!option.defaultOpt && option.keyError"> {{option.keyValidMessage}}</span>
          </div>
          <!-- //key -->
          <!-- value -->
          <div class="ddp-col-7">
            <input type="text" class="ddp-input-typebasic ddp-full" placeholder="{{option.ph || ('msg.storage.ph.config.value' | translate)}}"
                   [(ngModel)]="option.value" (ngModelChange)="option.valueError = false">
            <span class="ddp-data-error" *ngIf="option.valueError"> {{option.valueValidMessage}}</span>
          </div>
          <!-- value -->
          <!-- delete -->
          <a href="javascript:" class="ddp-icon-close" *ngIf="!option.defaultOpt" (click)="onClickRemoveOption('jobProperties', i)"></a>
          <!-- //delete -->
        </div>
        <!-- //list -->
        <!-- add option -->
        <a href="javascript:" class="ddp-btn-add" (click)="onClickAddOption('jobProperties')"><em class="ddp-icon-plus"></em> {{'msg.comm.btn.add' | translate}}</a>
        <!-- //add option -->
      </div>
    </div>
    <!-- //job properties -->
  </div>
</div>
